<template>
    <div class="main">
        <el-card style="margin:0 0 10px 0;" v-show="cookiesObj.roleCode == 'Admin'">
            <el-button @click="toSelectSchool" type="primary">选择学校</el-button>
        
            <el-tag closable v-if="cookiesObj.schoolName" @close='removeSchool'> {{cookiesObj.schoolName | schoolName}} </el-tag>
        </el-card>
        <div class="searchHead">
            <el-form inline>
                <el-form-item label="教职工姓名">
                    <el-input type="text" placeholder="请输入教职工姓名" v-model="name" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input type="text" placeholder="请输入手机号" v-model="cellPhone" maxlength="11"></el-input>
                </el-form-item>
                <el-form-item label="部门">
                    <el-input type="text" placeholder="请输入部门" v-model="deptName" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="在职状态">
                    <el-select v-model="status" placeholder="请选择">
                        <el-option label="全部" value="0">
                        </el-option>
                        <el-option v-for="(item, index) in onJobState" :key='index' :label="item.name" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchTeacher">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="btnLine">
            <el-button type="primary" @click="addList()">新增</el-button>
            <el-button type="primary" v-show="cookiesObj.roleCode == 'SchoolAdmin'">
                <a style="color: #fff" href="static/template/teacherTemplate.xlsx" download="教师模板">下载教师模板</a>
            </el-button>
            <!-- <el-button type="primary" style="position: relative">
                <input ref="inputFile" style="opacity:0; position: absolute;width:100%; height:100%;left:0;top:0" type="file" @change="jsReadFiles($event)"> 批量导入
            </el-button> -->
            <el-button type="primary" @click="exportExcel" >导出excel</el-button>
            <el-button type="primary" @click="toManFace" v-show="cookiesObj.roleCode == 'SchoolAdmin'">人脸信息采集</el-button>

             <importTeacher class="import-p" @complete="complete" v-show="cookiesObj.roleCode == 'SchoolAdmin'"></importTeacher>
        </div>
        <div>
            <cvue-table
                :option="tableOption"
                :data="tableData"
                ref="tbl1"
                :isShowAdd="false"
                :page="page"
                :tablePage="page.currentPage"
                :pageSize="page.pageSize"
                :loading="tableLoading"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :isShowPage="true"
                >
                <template slot-scope='scope' slot="deptNameList">
                    <div v-if="scope.row.deptNameList">
                        {{scope.row.deptNameList.join()}}
                    </div>
                </template>
                <!-- 操作按钮 -->
                <el-table-column
                    fixed="right"
                    slot="actionMenu"
                    label="操作"
                    align="center"
                    header-align="center"
                    width="300"
                >
                    <template slot-scope='scope'>
                        <div class="operation">
                            <el-button type="primary" @click="editList(scope.row)">编辑</el-button>
                            <el-button type="danger" @click="delList(scope.row)">删除</el-button>
                            <el-button type="primary" @click="changeStatus(scope.row)">职籍变动</el-button>
                        </div>
                    </template>
                </el-table-column>
            </cvue-table>
        </div>
        <add-list
        :dialogVisible='dialogVisibleAdd'
        @closeDialog="closeDialog('add')"
        @confirmDialog="confirmDialog('add')"
        >
        </add-list>
        <edit-list
        :dialogVisible='dialogVisibleEdit'
        @closeDialog="closeDialog('edit')"
        @confirmDialog="confirmDialog('edit')"
        >
        </edit-list>

        <cvue-dialog
        :dialogVisible='dialogVisibleStatus'
        title='职籍变动'
        :isShowFoot='true'
        dialogWidth='20%'
        @closeDialog='closeDialogStatus'
        @confirmDialog='confirmDialogStatus'
        @handleClose='closeDialogStatus'>
        <div class="dialog-body" slot="dialogBody">
            <el-select v-model="nowTeacher.status" placeholder="请选择">
                <el-option v-for="(item, index) in onJobState" :key='index' :label="item.name" :value="item.value">
                </el-option>
            </el-select>
        </div>
        </cvue-dialog>

         <selectSchool :dialogVisible="selectSchoolVisible"
            @close='selectSchoolVisible = false'
            @confirm='init'
        ></selectSchool>
    </div>
</template>
<script>
import cvueTable from '@/components/cvue-table'
import cvueDialog from '@/components/cvue-dialog'
import addList from './addList'
import editList from './editList'
import {readTeacher, importTeacherData} from '@/util/map'
import {baseUrl, busiUrl} from '@/config/config'
import importTeacher from '@/components/import/importTeacher'
import selectSchool from '@/components/selectSchool'
export default {
    name: 'list',
    components: {
        cvueTable,
        cvueDialog,
        addList,
        editList,
        importTeacher,
        selectSchool
    },
    data () {
        return {
            selectSchoolVisible: false,
            busiUrl: busiUrl,
            name: '',
            cellPhone: '',
            deptName: '',
            status: '0',
            tableLoading: false,
            dialogVisibleAdd: false,
            dialogVisibleEdit: false,
            dialogVisibleStatus: false,
            page: {
                total: 1, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10, // 每页显示多少条
                pageSizes: [10, 50, 100]
            },
            tableOption: {
                stripe: true,
                width: '100%',
                border: true,
                index: false,
                cloumn: [
                     {prop: 'schoolName', label: '学校名称', align: 'center'},
                    {prop: 'name', label: '教职工姓名', align: 'center'},
                    {prop: 'genderName', label: '性别', align: 'center'},
                    {prop: 'cellPhoneNum', label: '手机号', align: 'center'},
                    {prop: 'idNumber', label: '证件号', align: 'center'},
                    {prop: 'deptNameList', label: '部门', align: 'center', slotStatus: true},
                    {prop: 'jobPosition', label: '职务', align: 'center'},
                    {prop: 'statusName', label: '在职状态', align: 'center'}
                ]
            },
            tableData: [],
            importData: [],
            nowTeacher: ''
        }
    },
    computed: {
        onJobState () {
            return this.$store.state.teacher.onJobState
        },
        schoolId () {
            return this.$store.state.common.cookiesObj.schoolId
        },
         cookiesObj () {
             return this.$store.state.common.cookiesObj
         }
    },
    mounted () {
       this.init()
    },
    methods: {
        init () {
             this.getTeacherList()
            this.getSubject()
            this.getDept()
            this.getClassList()
            this.getRole()
        },
         toSelectSchool () {
            this.selectSchoolVisible = true
        },
        removeSchool () {
            delete this.$store.state.common.cookiesObj.schoolId
            delete this.$store.state.common.cookiesObj.schoolName
            this.$store.state.common.cookiesObj = JSON.parse(JSON.stringify(this.$store.state.common.cookiesObj))
            this.init()
        },
        complete () {
            this.getClassList()
        },
        // 职籍变动
        changeStatus (item) {
            this.nowTeacher = JSON.parse(JSON.stringify(item)) 
            this.dialogVisibleStatus = true
        },
        closeDialogStatus () {
            this.dialogVisibleStatus = false
        },
        confirmDialogStatus () {
            var params = {
                param: {
                    type: this.nowTeacher.status
                },
                id: this.nowTeacher.loginUserId
            }
            this.$store.dispatch('teacher/ChangeStatus', params).then(
                res => {
                    this.$message.success('职籍变动成功')
                    this.dialogVisibleStatus = false
                    this.getTeacherList()
                }
            )
        },
        // 搜索
        searchTeacher () {
            this.page.currentPage = 1
            this.getTeacherList()
        },
        // 获取教职工列表
        getTeacherList () {
            var params = {
                schoolId: this.$store.state.common.cookiesObj.schoolId,
                PageNum: this.page.currentPage,
                PageSize: this.page.pageSize,
                TeachName: this.name,
                Phone: this.cellPhone,
                DeptName: this.deptName,
                Status: this.status
            }
            this.$store.dispatch('teacher/GetTeacherList', params).then(
                res => {
                    this.tableData = res.items
                    this.page.total = res.totalCount
                }
            )
        },
        // 获取班级
        getClassList () {
             if (!this.schoolId) {
                return
            }
            var params = {
                schoolId: this.$store.state.common.cookiesObj.schoolId
            }
            this.$store.dispatch('teacher/GetClassList', params)
        },
        // 获取科目
        getSubject () {
            var params = {
                schoolId: this.$store.state.common.cookiesObj.schoolId,
                 PageNum: 1,
                PageSize: 1000
            }
            this.$store.dispatch('teacher/GetSubject', params).then(
                res => {
                    this.$store.state.teacher.subjectList = res.items
                }
            )
        },
        // 获取部门 
        getDept () {
            if (!this.schoolId) {
                return
            }
            var params = {
                schoolId: this.$store.state.common.cookiesObj.schoolId
            }
            this.$store.dispatch('teacher/GetDept', params).then(
                res => {
                    this.$store.state.teacher.deptList = res
                }
            )
        },
        getRole () {
			var params = {
				PageIndex: 1,
				PageSize: 100
			}
			this.$store.dispatch('role/GetRoles', params).then(
				res => {
					this.$store.state.teacher.roleList = res.items
				}
			)
		},
        // 删除教师
        delList (item) {
            if (item.teacherclassmapping.length > 0) {
                this.$message.error('这个老师有任课班级，不可删除')
                return
            }
            this.$confirm('确定要删除这个老师吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                // showInput: true,
                // inputPlaceholder: '请输入删除原因'
            }).then(
                (value) => {
                    this.$store.dispatch('teacher/DelOneTeacher', {id: item.id}).then(
                        res => {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            if (this.tableData.length == 1 && this.page.currentPage > 1) {
                                this.page.currentPage--
                            }
                            this.getTeacherList()
                        }
                    )
                }
            )
        },
        // 下载模板 
        // 导入模板 
        async jsReadFiles () {
            var fileList = this.$refs.inputFile.files
            for (let file of fileList) {
                var list = await readTeacher({file: file, fileId: Math.random() + ''})

                 try {
                    while (true) {
                        var temp = list.splice(0, 20)
                        if (temp.length > 0) {
                            await importTeacherData({list: temp, schoolId: this.schoolId})
                        } else {
                            break
                        }
                    }
                } catch (error) {
                    console.log(error)
                    this.$message.error(error.data.error.message)
                }
            }
            this.$refs.inputFile.value = ''
        },
        // 导出excel
        exportExcel () {
             if (!this.schoolId) {
                this.$message.error('请选择学校')
                return
            }
            var params = {
                schoolId: this.$store.state.common.cookiesObj.schoolId,
                pageNum: 1,
                pageSize: 1000,
                TeachName: this.name,
                Phone: this.cellPhone,
                DeptName: this.deptName,
                Status: this.status
            }
            var str = '?'
            for (let key in params) {
                str += key + '=' + params[key] + '&'
            }
            str = str.substring(0, str.length - 1)
            let url = baseUrl + '/bdc/api/app/teacher/exportExcel' + str
            window.open(url)
        },
        // 人脸信息采集
        toManFace () {
            window.open(this.busiUrl + '/face/index.html?schoolId=' + this.$store.state.common.cookiesObj.schoolId)
        },
        handleCurrentChange (val) {
            this.page.currentPage = val
            this.getTeacherList()
        },
        handleSizeChange (val) {
            this.page.currentPage = 1
            this.page.pageSize = val
            this.getTeacherList()
        },
        closeDialog (type) {
            if (type == 'add') {
                this.dialogVisibleAdd = false
            } else {
                this.dialogVisibleEdit = false
            } 
        },
        confirmDialog (type) {
            if (type == 'add') {
                this.dialogVisibleAdd = false
            } else {
                this.dialogVisibleEdit = false
            } 
            this.getTeacherList()
        },
        addList () {
            if (!this.schoolId) {
                this.$message.error('请选择学校')
                return
            }
            this.dialogVisibleAdd = true
        },
        editList (item) {
            this.$store.state.teacher.id = item.id
            this.$store.state.teacher.teacherData = item
            this.dialogVisibleEdit = true
        }
    }
}
</script>
<style scoped>
    .main{
        background: #fff;
    }
    .searchHead{
        border-bottom: 1px solid #DCDFE6;
    }
    .btnLine{
        margin: 20px 0;
    }
    .dialog-body {
        text-align: center;
    }
    .import-p{display: inline-block; vertical-align: top;padding: 0 20px;}
</style>
